<template>
	<div id="ratings">
		<div class="rating" ref="ratingWrapper">
			<div class="rating_wrapper_all">
				<div class="rating_top" style="display: flex;border-bottom:1px solid #ccc;background: #FFFFFF;">
					<div class="rating_top_l" style="width: 130px;text-align: center;border-right: 1px solid rgba(232,236,240,1);padding: 18px 0;margin-right: 16px;">
						<h1 class="rating_num" style="font-size: 24px;color:rgb(255,153,0);">3.9分</h1>
						<p style="color: rgb(7,17,27);font-size: 12px;line-height: 12px;margin: 6px 0 8px;">综合评分</p>
						<p style="color: #ccc; font-size: 10px;line-height: 10px;">高于周边商家60.2%</p>
					</div>

					<div class="rating_top_r" style="flex: 1;padding: 18px 0;line-height: 17px;">
						<div class="overview-right">
							<span style="vertical-align: top;font-size: 12px;color: rgb(7,17,27);">服务态度：</span>
							<div class="star">
								<star :score="sellerList.serviceScore" :size="24"></star>
							</div>
							<span class="score" >{{sellerList.serviceScore}}</span>

						</div>

						<div class="score-wrapper" style="line-height: 17px;">
							<span style="vertical-align: top;font-size: 12px;color: rgb(7,17,27);">商品评分：</span>
							<div class="star">
								<<star :score="sellerList.foodScore" :size="24"></star>
							</div>
							<span class="score">{{sellerList.foodScore}}</span>
						</div>
						<div class="delivery-wrapper">
							<span style="vertical-align: top;font-size: 12px;color: rgb(7,17,27);">送达时间:</span>
							<span style="color: rgb(147,153,159);font-size: 12px;line-height: 18px;margin-left: 10px;">44分钟</span>
						</div>

					</div>

				</div>

				<div class="rating_wrapper">

					<div class="rating_nav">
						<ul class="rating_nav_list">
							<li>
								全部<span class="number">10</span>
							</li>
							<li>
								满意<span class="number">6</span>
							</li>
							<li>
								不满意<span class="number">4</span>
							</li>
						</ul>

						<div class="rating_content_list">
							<div class="rating_content_show">
								<ul>

									<li class="rating_content_show_list" v-for="ratingContext in ratingList">
										<div style="display: flex;margin-bottom: 10px;">
											<div style="width: 45px;">
												<img :src="ratingContext.avatar" class="rating_avatar" />
											</div>

											<div style="flex: 1;margin-left: 5px;">
												<div style="vertical-align: top;display: inline;">
													<span class="user_name">{{ratingContext.username}}</span>
													<span class="time"> 2019-06-23</span>
												</div>
												<div style="display: block;margin-top: 5px;">
													<star :score="ratingContext.score" :size="24"></star>
													<span v-if="ratingContext.deliveryTime" class="arrive_time">{{ratingContext.deliveryTime}}分钟送达</span>
												</div>
												<p class="rating_content">
													{{ratingContext.text}}
												</p>
												<div class="seller_thing">
													<ul>
														<li v-for="sGood in ratingContext.recommend">
															<span>{{sGood}}</span>
														</li>
														
													</ul>
												</div>
											</div>
										</div>
									</li>

								</ul>
							</div>

						</div>
					</div>

				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import shopcat from '../shopcat/shopcat';
	import BScroll from 'better-scroll';
	import star from '../star/star';
	export default {
		name: 'ratings',
		data() {
			return {
				ratingList: [],
			    sellerList:[]
			}
		},
		created() {
			this.$store.dispatch('getSellerJson').then(()=>{
		  		this.sellerList = this.$store.state.sellerList
//		  		console.log(this.sellerList)
		  	})
			this.getRatings()
		},
		mounted() {

		},
		methods: {
			getRatings: function() {
				this.$axios.get('http://localhost:8081/api/ratings').then(res => {
					this.ratingList = res.data.data
					console.log(this.ratingList)
					this.$nextTick(() => { //DOM每次修改数据更新
						this.ratingScroll = new BScroll(this.$refs.ratingWrapper, {
							click: true
						});
						
					});

				});
			}
		},
		components: {
			shopcat,
			star
		}
	}
</script>

<style scoped="scoped">
	#ratings {
		position: absolute;
		width: 100%;
		top: 185px;
		bottom: 0;
	}
	
	.rating {
		height: 100%;
		overflow: hidden;
		background: #D9DDE1;
	}
	/*星星评分*/
	
	.star {
		display: inline;
		font-size: 0;
	}
	
	.star-item {
		background: url(../../../resource/img/star24_half@2x.png);
		display: inline-block;
		background-repeat: no-repeat;
		width: 15px;
		height: 15px;
		margin-right: 6px;
		background-size: 15px 15px;
	}
	
	.star-item:last-child {
		margin: 0;
	}
	
	
	/*评论内容*/
	.rating_wrapper {
		margin-top: 20px;
		background: #FFFFFF;
	}
	
	.rating_nav_list {
		padding: 18px 0;
		margin: 0 20px;
		border-bottom: 1px solid #ccc;
	}
	
	.rating_nav_list li {
		font-size: 14px;
		margin-right: 10px;
		color: #FFFFFF;
		text-align: center;
		display: inline-block;
		height: 40px;
		width: 65px;
		line-height: 40px;
		background: #00a0dc;
	}
	
	.rating_nav_list li .number {
		line-height: 0;
		font-size: 10px;
		margin-left: 4px;
	}
	.rating_avatar{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: inline-block;
		background: #CCCCCC;
		vertical-align: top;
	}
	.user_name{
		color: rgb(7,17,27);
		font-size: 10px;
		line-height: 12px;
	}
	.time{
		color: rgb(147,153,159);
		font-weight: 200;
		line-height: 20px;
		font-size: 10px;
		float: right;
	}
	.arrive_time{
		color: rgb(147,153,159);
		font-weight: 200;
		font-size: 10px;
	}
	.rating_content{
		color: rgb(7,17,27);
		font-size: 13px;
		line-height: 18px;
		margin: 6px 0 8px;
	}
	.rating_content_show {
		padding: 18px 0;
		margin: 0 20px;
		color: #d9dbdd;
	}
	
	.rating_content_show_list {
		margin-bottom: 18px;
		border-bottom: 1px solid #ccc;
	}
	
	.seller_thing {
		margin-bottom: 10px;
	}
	
	.seller_thing ul li {
		display: inline-block;
		margin-right: 8px;
		margin-bottom: 8px;
		border: 1px solid rgba(7, 17, 27, 0.1);
	}
	
	.seller_thing ul li span {
		font-size: 9px;
		color: rgb(147, 153, 159);
		line-height: 18px;
		padding: 0 6px;
	}
	
	.score{
		font-size: 12px;
		color: rgb(255, 153, 0);
		padding-left:3px ;
	}
</style>